<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <link href="./image/atreez_icon.png" rel="icon" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1011495_xriwcg2e6ch.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/dialog2.css">
    <link rel="stylesheet" href="./css/checkout.css">
    <link rel="stylesheet" href="./css/login.css">
    <title>Address list</title>
    <script src="./js/common.js"></script>
    <script src="./js/jquery/jquery.min.js"></script>
    <script src="./js/layer/layer.js"></script>
</head>
<style>
    .address-list .list-inline li {
        margin: 0;
    }
    .address-list .header-title {
        font-weight: bold;
    }

    .address-list .content {
        margin-top: 0.88rem !important;
        margin-bottom: 1rem !important;
    }
    .address-list .add-list .address-item {
        border-bottom: 0.02rem solid #E5E6E7;
    }
    .address-list .add-list .address-item .cell {
        line-height: 0.5rem;
    }
    .address-list .address-item .address-edit {
        line-height: 1rem;
    }
    .address-list .address-item .address-edit .iconfont {
        font-weight: bold !important;
        color: #D8D8D8;
    }
    .address-list .add-address-btn {
        position: fixed;
        width: -webkit-fill-available;
        bottom: 0;
    }
    .address-list .name-tel .default {
        font-size: 0.16rem;
        color: #FFFFFF;;
        background-color: #000;
        border-radius: 0.16rem;
        padding: 0.06rem 0.12rem;
    }
</style>
<body onload="init()">
<div class="container-fluid address-list">
    <div class="row header">
        <ul class="list-inline nav-tabs">
            <li class="ml-10"><a href="javascript:history.back(-1);" data-toggle="tab-back"><i class="iconfont icon-left-line"></i></a></li>
            <li>My Page</li>
        </ul>
    </div>
    <div class="row content mlr-16">
        <div class="header-title mb-10">Address</div>
        <div class="add-list mt-12">
            <div class="address-item mt-20 pb-10">
                <div class="address-div pull-left">
                    <div class="name-tel cell"><span class="name">Kota Li</span><span class="phone ml-10">+62 21 29465000</span></div>
                    <div class="area-info cell">Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88</div>
                </div>
                <div class="address-edit pull-right"><i class="iconfont icon-right-line"></i></div>
                <div class="clearfix"></div>
            </div>
            <div class="address-item mt-20 pb-10">
                <div class="address-div pull-left">
                    <div class="name-tel cell"><span class="name">Kota Li</span><span class="phone ml-10">+62 21 29465000</span><span class="default ml-5">default</span></div>
                    <div class="area-info cell">Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88</div>
                </div>
                <div class="address-edit pull-right"><i class="iconfont icon-right-line"></i></div>
                <div class="clearfix"></div>
            </div>
            <div class="address-item mt-20 pb-10">
                <div class="address-div pull-left">
                    <div class="name-tel cell"><span class="name">Kota Li</span><span class="phone ml-10">+62 21 29465000</span></div>
                    <div class="area-info cell">Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88</div>
                </div>
                <div class="address-edit pull-right"><i class="iconfont icon-right-line"></i></div>
                <div class="clearfix"></div>
            </div>
            <div class="address-item mt-20 pb-10">
                <div class="address-div pull-left">
                    <div class="name-tel cell"><span class="name">Kota Li</span><span class="phone ml-10">+62 21 29465000</span></div>
                    <div class="area-info cell">Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88</div>
                </div>
                <div class="address-edit pull-right"><i class="iconfont icon-right-line"></i></div>
                <div class="clearfix"></div>
            </div>
            <div class="address-item mt-20 pb-10">
                <div class="address-div pull-left">
                    <div class="name-tel cell"><span class="name">Kota Li</span><span class="phone ml-10">+62 21 29465000</span></div>
                    <div class="area-info cell">Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88</div>
                </div>
                <div class="address-edit pull-right"><i class="iconfont icon-right-line"></i></div>
                <div class="clearfix"></div>
            </div>
            <div class="address-item mt-20 pb-10">
                <div class="address-div pull-left">
                    <div class="name-tel cell"><span class="name">Kota Li</span><span class="phone ml-10">+62 21 29465000</span></div>
                    <div class="area-info cell">Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88</div>
                </div>
                <div class="address-edit pull-right"><i class="iconfont icon-right-line"></i></div>
                <div class="clearfix"></div>
            </div>
            <div class="address-item mt-20 pb-10">
                <div class="address-div pull-left">
                    <div class="name-tel cell"><span class="name">Kota Li</span><span class="phone ml-10">+62 21 29465000</span></div>
                    <div class="area-info cell">Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88</div>
                </div>
                <div class="address-edit pull-right"><i class="iconfont icon-right-line"></i></div>
                <div class="clearfix"></div>
            </div>
            <div class="address-item mt-20 pb-10">
                <div class="address-div pull-left">
                    <div class="name-tel cell"><span class="name">Kota Li</span><span class="phone ml-10">+62 21 29465000</span></div>
                    <div class="area-info cell">Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88</div>
                </div>
                <div class="address-edit pull-right"><i class="iconfont icon-right-line"></i></div>
                <div class="clearfix"></div>
            </div>
            <div class="address-item mt-20 pb-10">
                <div class="address-div pull-left">
                    <div class="name-tel cell"><span class="name">Kota Li</span><span class="phone ml-10">+62 21 29465000</span></div>
                    <div class="area-info cell">Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88</div>
                </div>
                <div class="address-edit pull-right"><i class="iconfont icon-right-line"></i></div>
                <div class="clearfix"></div>
            </div>
            <div class="address-item mt-20 pb-10">
                <div class="address-div pull-left">
                    <div class="name-tel cell"><span class="name">Kota Li</span><span class="phone ml-10">+62 21 29465000</span></div>
                    <div class="area-info cell">Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88</div>
                </div>
                <div class="address-edit pull-right"><i class="iconfont icon-right-line"></i></div>
                <div class="clearfix"></div>
            </div>
            <div class="address-item mt-20 pb-10">
                <div class="address-div pull-left">
                    <div class="name-tel cell"><span class="name">Kota Li</span><span class="phone ml-10">+62 21 29465000</span></div>
                    <div class="area-info cell">Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88</div>
                </div>
                <div class="address-edit pull-right"><i class="iconfont icon-right-line"></i></div>
                <div class="clearfix"></div>
            </div>
            <div class="address-item mt-20 pb-10">
                <div class="address-div pull-left">
                    <div class="name-tel cell"><span class="name">Kota Li</span><span class="phone ml-10">+62 21 29465000</span></div>
                    <div class="area-info cell">Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88</div>
                </div>
                <div class="address-edit pull-right"><i class="iconfont icon-right-line"></i></div>
                <div class="clearfix"></div>
            </div>
            <div class="address-item mt-20 pb-10">
                <div class="address-div pull-left">
                    <div class="name-tel cell"><span class="name">Kota Li</span><span class="phone ml-10">+62 21 29465000</span></div>
                    <div class="area-info cell">Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88 Jalan Casablanca No.88</div>
                </div>
                <div class="address-edit pull-right"><i class="iconfont icon-right-line"></i></div>
                <div class="clearfix"></div>
            </div>
        </div>


    </div>
    <div class="btn-default-black mlr-16 text-center add-address-btn">
        <div class="sku-btn">Add New Address</div>
    </div>
</div>

</body>
<script>
    $(function () {
        var address_len = 35
                ,area = $('.address-item .area-info')
                ,content = area.html();      //默认显示字数
        if(content != undefined && content.length > address_len){
            var inhtml = content.substring(0,address_len) + '...';
            area.html(inhtml);
        }


    })

    function init(){
        var len = 60;
        $('.pro-info .pro-name').each(function(){
            var content = $(this).html();
            var html = content.substring(0,len);
            var html2 = content.length>len?"...":"";
            this.innerHTML = html+html2;
        });

    }
</script>
</html>